<template>
  <div class="form-Com">
    <div v-if="$store.state.formList[formListIndex].result===false" class="errorMsg">
      报名失败:
      {{ $store.state.formList[formListIndex].errorMsg}}
    </div>
    <div v-if="$store.state.formList[formListIndex].result===true" class="sucess">
      报名成功
    </div>
    <div v-for="(item ,index) of $store.state.formList[formListIndex].componenList" :key="index" class="template-container">
      <component :thisComponen="item" :is="item.componentName"></component>
    </div>
  </div>
</template>
<script>
import stringTem from "./form/stringTem";
import numberTem from "./form/numberTem";
import moreSelectTem from "./form/moreSelectTem";
import selForumTem from "./form/selForumTem";
export default {
  props: ["formListIndex"], //传过来的表单索引
  components: {
    stringTem,
    numberTem,
    moreSelectTem,
    selForumTem
  }
};
</script>
<style scoped>
.form-Com {
  width: 100%;
  height: auto;
}
.template-container {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 0rem 1.2rem;
}
.errorMsg {
  width: 100%;
  height: auto;
  text-align: left;
  padding: 0.36rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background: #ff3e85;
}
.sucess {
  width: 100%;
  height: auto;
  text-align: left;
  padding: 0.36rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background: #67c23a;
}
</style>
